<!--  -->
<template>
  <div class="list">
    <div v-for="(item,index) in dataForm[scriptItem.text]"
         :key="index"
         class="for-item">
      <el-form inline>
        <!-- action btn -->
        <el-form-item style="width:70px;">
          <el-button type="danger"
                     icon="el-icon-delete"
                     circle
                     plain
                     size="mini"
                     :disabled="index === 0 && dataForm[scriptItem.text].length <= 1"
                     @click="deleteItem(index)"></el-button>
          <el-button type="primary"
                     icon="el-icon-plus"
                     circle
                     plain
                     size="mini"
                     @click="addItem(index)"></el-button>
        </el-form-item>
        <!-- for -->
        <el-form-item :label="scriptItem.toLabel" style="display: inline-block;"
                      :label-width="`${scriptItem.toLabelWidth}px`">
          <el-select v-model="item[scriptItem.toFields]"
                     filterable
                     clearable
                     :placeholder="scriptItem.toHint"
                     :style="{ width: `${scriptItem.toFieldsWidth}px` }"
                     @visible-change="comForLists($event, index)"
                     default-first-option>
            <el-option v-for="(o,ii) in forLists"
                       :key="ii"
                       :label="o[scriptItem.toFieldLabel]"
                       :value="o[scriptItem.toFieldValue]"></el-option>
          </el-select>
        </el-form-item>
        <!-- template -->
        <el-form-item :label="scriptItem.templateLabel" style="display: inline-block;"
                      :label-width="`${scriptItem.templateLabelWidth}px`">
          <el-select v-model="item[scriptItem.templateFields]"
                     filterable
                     clearable
                     :placeholder="scriptItem.templateHint"
                     :style="{ width: `${scriptItem.templateFieldsWidth}px` }"
                     default-first-option>
            <el-option v-for="(o,ii) in selectDataObj[`${scriptItem.text}ListsOrigin`]"
                       :key="ii"
                       :label="o[scriptItem.templateFieldLabel]"
                       :value="o[scriptItem.templateFieldValue]"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <quill-editor style="padding: 10px 0;"
                    :style="{width: `${comTextareaWidth}px`}"
                    label="Edwin Test 678"
                    :disabled="true"
                    :value="getTemplateContent(item)"
                    :options="editorOption"></quill-editor>
    </div>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'

export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {
      editorOption: {
        name: '232',
        modules: {
          toolbar: [
            ['code-block'],
            [{ 'direction': 'rtl' }],
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'color': [] }],
            [{ 'background': [] }],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'font': ['sans-serif', 'monospace', 'serif'] }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'align': [] }],
            ['link'],
            ['clean']
          ]
        },
        theme: 'snow',
        placeholder: ''
      },
      forLists: []
    }
  },
  computed: {
    comScriptItem () {
      return { ...this.scriptItem, fieldLabel: this.scriptItem.templateFieldLabel, fieldValue: this.scriptItem.templateFieldValue }
    },
    comTextareaWidth () {
      try {
        let width = 70 + 20 + Number(this.scriptItem.toLabelWidth) + Number(this.scriptItem.toFieldsWidth) + Number(this.scriptItem.templateLabelWidth) + Number(this.scriptItem.templateFieldsWidth)
        return width
      } catch (error) {
        return 'auto'
      }
    }
  },
  methods: {
    addItem (index) {
      let temp = {}
      temp[this.scriptItem.toFields] = null
      temp[this.scriptItem.templateFields] = null
      this.dataForm[this.scriptItem.text].splice(index + 1, 0, temp)
    },
    deleteItem (index) {
      this.dataForm[this.scriptItem.text].splice(index, 1)
    },
    getTemplateContent (item) {
      try {
        return this.selectDataObj[`${this.scriptItem.text}ListsOrigin`].find(e => e[this.scriptItem.templateFieldValue] === item[this.scriptItem.templateFields]).template
      } catch (error) {
        return null
      }
    },
    comForLists (e, index) {
      if (!e) {
        return false
      }
      let lastList = []
      let selectedList = this.dataForm[this.scriptItem.text] || []
      let originList = this.scriptItem.toDataList || []
      if (Array.isArray(selectedList)) {
        for (let j = 0; j < originList.length; j++) {
          const originItem = originList[j]
          if (selectedList.findIndex(e => e[this.scriptItem.toFields] === originItem[this.scriptItem.toFieldValue]) === -1) {
            lastList.push(originItem)
          }
        }
      }
      try {
        if (selectedList[index][this.scriptItem.toFields]) {
          let temp = originList.find(e => selectedList[index][this.scriptItem.toFields] === e[this.scriptItem.toFieldValue])
          temp && lastList.push(temp)
        }
      } catch (error) { }
      this.forLists = lastList
    },
    dataValidate () {
      let selectedList = this.dataForm[this.scriptItem.text] || []
      if (Array.isArray(selectedList)) {
        if (selectedList.findIndex(e => !e[this.scriptItem.toFields]) > -1) {
          this.$message.error(this.$t('custom.tips.required', { fields: this.scriptItem.toLabel }))
          return false
        }
        if (selectedList.findIndex(e => !e[this.scriptItem.templateFields]) > -1) {
          this.$message.error(this.$t('custom.tips.required', { fields: this.scriptItem.templateLabel }))
          return false
        }
        return true
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.list {
  border-bottom: 1px solid #dfdfdf;
  border-radius: 6px;
  .for-item {
    border-bottom: 1px dashed #dfdfdf;
    padding: 10px 10px 0 10px;
    margin-bottom: 15px;
    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
  }
}
</style>
